<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>涨速指标</title>
    <link href="../styles/common.css" rel="stylesheet" />
    <script src="../scripts/Plugin/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="../scripts/common.js"></script>
    <script src="../scripts/Plugin/axios.min.js"></script>
    <script src="../scripts/Plugin/md5.js"></script>
    <!-- <script src="../scripts/Plugin/vue.js"></script> -->

    <script src="../scripts/Plugin/laydate/laydate.js"></script>
</head>

<body>
    <div id="app">
        <!--顶部-->
        <div class="header left">
            <div class="left nav">
                <ul>
                    <li @click="toggle('涨速', 'zsData')" :class="isActive('涨速')">
                        <i class="nav_1"></i><a>涨速</a>
                    </li>
                    <li @click="toggle('大资金', 'dzj')" :class="isActive('大资金')">
                        <i class="nav_2"></i><a>大资金</a>
                    </li>
                    <li @click="toggle('板块前10', 'bk10Data')" :class="isActive('板块前10')">
                        <i class="nav_3"></i>
                        <a>板块前10</a>
                    </li>
                    <li @click="toggle('内外盘比率', 'nwpData')" :class="isActive('内外盘比率')">
                        <i class="nav_4"></i><a>内外盘比率</a>
                    </li>

                </ul>
            </div>
            <div class="right nav">
                <ul>
                    <li @click="toggle('自选资金0复盘', 'zxData/fp')" :class="isActive('自选资金0复盘')">
                        <i class="nav_1"></i><a>自选资金0复盘</a>
                    </li>
                    <li @click="toggle('屠龙刀', 'zxData/tld')" :class="isActive('屠龙刀')">
                        <i class="nav_2"></i><a>屠龙刀</a>
                    </li>
                    <li @click="toggle('涨停分析', 'zxData/zt')" :class="isActive('涨停分析')">
                        <i class="nav_3"></i><a>涨停分析</a>
                    </li>
                    <li @click="toggle('自选', 'zxData/all')" :class="isActive('自选')">
                        <i class="nav_3"></i><a>我的自选</a>
                    </li>
                </ul>
            </div>
            <div class="header_center left" style="position: relative">
                <!-- <strong>1.缩量大跌，上下均衡缩量跌, 上下均衡放量涨</strong></br>
                    <strong>2.涨停后大跌洗盘</strong></br>
                    <strong>3.放量上涨，2-3连跌</strong></br> -->
                <strong>{{formatDate(new Date(), "yyyy-MM-dd hh:mm:ss")}}</strong>
            </div>
            <div class="right nav text_right">
                <ul></ul>
            </div>
        </div>
        
        <!--内容部分-->
        <div v-show="currentType.name != '热力图'" class="con left">
            <!--数据总概-->
            <div class="con_div">
                <div class="con_div_text left">
                    <div class="con_div_text01 left">
                        <div :class="setFontColor('指数', dpData.info.dp_zdf, 'zs')" class="left text01_div">
                            <p>大盘指数</p>
                            <p>{{dpData.info.exponent}}</p>
                        </div>
                    </div>
                    <div class="con_div_text01 right">
                        <div :class="setFontColor('指数', dpData.info.dp_zdf, 'zs')" class="left text01_div">
                            <p>大盘涨跌幅</p>
                            <p>{{dpData.info.dp_zdf}}%</p>
                        </div>
                    </div>
                </div>
                <div class="con_div_text left">
                    <div class="con_div_text02 left">
                        <div :class="setFontColor('指数', dpData.info.dp_zdf, 'zs')" class="left text01_div">
                            <p>大盘活跃度</p>
                            <p class="sky">{{dpData.info.AP}}</p>
                        </div>
                    </div>
                    <div class="con_div_text02 left">
                        <div :class="setFontColor('指数', dpData.info.dp_zdf, 'zs')" class="left text01_div">
                            <p>大盘拥挤度</p>
                            <p class="sky">{{Number(dpData.info.crowding_degree).toFixed(2)}}</p>
                        </div>
                    </div>
                    <div class="con_div_text02 right">
                        <div class="left text01_div zdfBig">
                            <p>涨停数</p>
                            <p class="sky">{{dpData.info.zt_num}}</p>
                        </div>
                    </div>
                    <div class="con_div_text02 right">
                        <div class="left text01_div zdfSmall">
                            <p>跌停数</p>
                            <p class="sky">{{dpData.info.dt_num}}</p>
                        </div>
                    </div>
                </div>
                <div class="con_div_text left">
                    <div class="zj_div_text01 left">
                        <div :class="setFontColor('指数', dpData.info.sgt_lr, 'zs')" class="left text01_div">
                            <p>深股通</p>
                            <p class="org">
                                {{(dpData.info.sgt_lr/10000).toFixed(2)}}亿
                            </p>
                        </div>
                    </div>
                    <div class="zj_div_text01 left">
                        <div :class="setFontColor('指数', dpData.info.hgt_lr, 'zs')" class="left text01_div">
                            <p>沪股通</p>
                            <p class="org">
                                {{(dpData.info.hgt_lr/10000).toFixed(2)}}亿
                            </p>
                        </div>
                    </div>
                    <div class="zj_div_text01 left">
                        <div :class="setFontColor('指数', dpData.info.bx_lr, 'zs')" class="left text01_div">
                            <p>北向</p>
                            <p class="org">
                                {{(dpData.info.bx_lr/10000).toFixed(2)}}亿
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--告警数据列表-->
            <div  class="div_any">
                <div class="left div_table_box" style="width: 60%">
                    <div class="div_any_child" :style="getHeight(jkData['data'])">
                        <div class="div_any_title">
                            <img class="sub_title"  src="../images/title_16.png" />
                            <span class="sub_title">监控信息:</span>
                            <span :class="jkData.update_date && jkData.update_date.includes('中断') ? 'zdfSmall' : 'zdfBig'">{{jkData.update_date}}</span>
                            <div v-if="currentType.name == '自选' || currentType.name == '自选资金0复盘'">
                                <input  v-model="searchInput"></input>
                            </div>
                            <div class="sub_title" v-if="currentType.name == '涨停分析'">
                                <button @click="addZx" >添加自选</button>
                                <input v-model="zxInput"></input>
                            </div>
                            <div class="sub_title">
                                <button @click="exportStock" >导出</button>
                            </div>
                        </div>
                        <div class="table_p" id="wc_1">
                            <table>
                                <thead>
                                    <tr>
                                        <th index="0" >序号</th>
                                        <th v-for="(val, index) in jkData['columns']" 
                                        :class="setTitleColor(index)"
                                        @click="setSortCfg(index)"
                                        :key="index"
                                        :index="index">
                                        <div v-if="hidden(val)">
                                            {{val}}
                                        </div>
                                        </th>
                                        <!-- <th index="10" >涨停原因</th> -->
                                        <th index="11" v-if="currentType.name=='自选'">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(items, index) in jkData['data']" :key="index"
                                        @dblclick="copyCode(items[jkData['columns'][1]])"
                                        :class="[setBackgroundColor(computedVal(items[[jkData['columns'][7]]]), items[1]), setFontColor()]">
                                        <td name="index">
                                            {{index+1}}
                                        </td>
                                        <td name="名称">{{items[jkData['columns'][0]]}}</td>
                                        <td name="代码" v-if="hidden(jkData['columns'][1])">{{items[jkData['columns'][1]]}}</td>
                                        <td name="最新价" :class="setFontColor('最新价', items[jkData['columns'][2]], 'wc')">
                                            {{items[jkData['columns'][2]].toFixed(2)}}
                                        </td>
                                        <td name="涨跌幅" :class="setFontColor('涨跌幅', items[jkData['columns'][3]], 'wc')">
                                            {{items[jkData['columns'][3]].toFixed(2)}}%
                                        </td>
                                        <td name="换手率" :class="setFontColor('换手率', items[jkData['columns'][4]], 'wc')">
                                            {{items[jkData['columns'][4]].toFixed(2)}}%
                                        </td>
                                        <td name="涨速" :class="setFontColor('涨速', items[jkData['columns'][5]], 'wc')">
                                            {{items[jkData['columns'][5]].toFixed(2)}}%
                                        </td>
                                        <td name="流通市值" v-if="hidden(jkData['columns'][6])">
                                            {{items[jkData['columns'][6]].toFixed(2)}}亿
                                        </td>
                                        <td name="行业">{{computedVal(items[jkData['columns'][7]])}}</td>
                                        <td name="主力资金" :class="setFontColor('主力资金', items[jkData['columns'][8]], 'wc')">
                                            {{items[jkData['columns'][8]].toFixed(2)}}
                                        </td>
                                        <td v-show="jkData['columns'][9]" name="内外盘比率" :class="setFontColor('内外盘比率', items[jkData['columns'][9]], 'wc')">
                                            {{items[jkData['columns'][9]] ? items[jkData['columns'][9]].toFixed(2): "0.00"}}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="left div_table_box" style="width: 36%">
                    <div class="div_any_child" :style="getHeight(bkData['data'].slice(0,50))">
                        <div class="div_any_title">
                            <img src="../images/title_16.png" />板块异动
                        </div>
                        <div class="table_p" id="wc_1">
                            <table>
                                <thead>
                                    <tr>
                                        <th>板块名称</th>
                                        <th style="display: none">板块代码</th>
                                        <th>涨跌幅</th>
                                        <th>换手率</th>
                                        <th>上涨家数</th>
                                        <th>下跌家数</th>
                                        <th>领涨股票</th>
                                        <th>涨跌幅</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(items, index) in bkData['data'].slice(0,50)" :key="index">
                                        <td name="板块名称">{{items[0]}}</td>
                                        <td style="display: none" name="板块代码"></td>
                                        <td name="涨跌幅" :class="setFontColor('涨跌幅', items[2], 'bk')">{{items[2].toFixed(2)}}%</td>
                                        <td name="换手率" :class="setFontColor('换手率', items[3], 'bk')">{{items[3].toFixed(2)}}%</td>
                                        <td name="上涨家数">{{items[4]}}</td>
                                        <td name="下跌家数">{{items[5]}}</td>
                                        <td name="领涨股票">{{items[6]}}</td>
                                        <td name="涨跌幅" :class="setFontColor('涨跌幅', items[7], 'bk')">{{items[7].toFixed(2)}}%</td>

                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div v-show="currentType.name == '热力图'" ref="relitu" id="relitu" style="height: 80vh; width: 140vh; margin-top: 30px"></div>
        <button @click="topFunction()" class="top-button" id="myBtn" title="返回顶部">
            上
        </button>
    </div>
    <script src="../scripts/Plugin/vue.js"></script>
    <script setup src="../scripts/index.js"></script>
</body>

</html>